<template>
    <div class="main">
        <!-- 歌单分类标签 -->
        <div class="category-tags">
            <span 
                v-for="tag in tags" 
                :key="tag.name"
                class="tag" 
                :class="{ active: currentTag === tag.name }"
                @click="handleTagClick(tag.name)"
            >
                {{ tag.name }}
            </span>
        </div>
        <!-- 歌单网格 -->
        <div class="song-list-grid">
            <template v-if="songListPageStore.songLists && songListPageStore.songLists.length > 0">
                <div class="song-card" v-for="playlist in songListPageStore.songLists" :key="playlist.id">
                    <div class="card-cover">
                        <img @click="handleCardClick(playlist.id)" :src="`${config.downloadUrl}?name=${playlist.pic}`" alt="封面">
                        <div class="play-button" @click="playAll(playlist.id)">
                                <el-icon><VideoPlay /></el-icon>
                        </div>
                    </div>
                    <div class="card-title">{{ playlist.title }}</div>
                </div>
            </template>
            <div v-else class="empty-state">
                空空如也
            </div>
        </div>
    </div>
</template>

<script setup name="SongList">
import { ref, onMounted } from 'vue'
import { useSongListPageStore } from '@/store/songListPage' 
import { selectAllSongListNoPage,selectSongListByStyleNoPage } from '@/api/songList'
import { usePlayListDetails } from '@/store/playListDetails'
import config from '../../../public/config'
import { selectSongBySongListIdNoPage } from '@/api/listSong';
import { selectSongById } from '@/api/song';
import { useAudioStore } from '@/store/audio';
import { useListSongStore } from '@/store/listSong';
const listSongStore = useListSongStore()
const songListPageStore = useSongListPageStore()
const playListDetailsStore = usePlayListDetails()
const audioStore = useAudioStore()


// 标签数据
const tags = [
    {name:'全部'},
    { name: '华语' },
    { name: '欧美' },
    { name: '摇滚' },
    { name: '民谣' },
    { name: '电子' },
    { name: '轻音乐'}
]

const currentTag = ref('全部')
const loading = ref(false)

// 处理标签点击
const handleTagClick = async (tagName) => {
    currentTag.value = tagName
    if(tagName === '全部'){
        await fetchPlaylists()
    }else{
        await fetchPlaylistsByTag(tagName)
    }
}

// 获取歌单全部数据
const fetchPlaylists = async () => {
    loading.value = true
    try {
        const res = await selectAllSongListNoPage()
        songListPageStore.songLists = res
    } catch (error) {
        console.error('获取歌单失败:', error)
    } finally {
        loading.value = false
    }
}
//获取分类歌单数据
const fetchPlaylistsByTag = async (tagName) => {
    loading.value = true
    try {
        let params = new URLSearchParams()
        params.append('style',tagName)
        const res = await selectSongListByStyleNoPage(params)
        songListPageStore.songLists = res
    } catch (error) {
        console.error('获取歌单失败:', error)
    } finally {
        loading.value = false
    }
}

onMounted(() => {
    fetchPlaylists()
})

function handleCardClick(id){
    playListDetailsStore.detailsId = id
    playListDetailsStore.isOpen = true
}
function playAll(id){
    getSongListDetails(id)
    audioStore.listOfSong = listSongStore.SongData
    audioStore.id = audioStore.listOfSong[0].id;
    audioStore.url = audioStore.listOfSong[0].url;
    audioStore.pic = audioStore.listOfSong[0].pic
    audioStore.title = audioStore.listOfSong[0].name
    audioStore.listIndex = 0
    audioStore.singerId = audioStore.listOfSong[0].singerId
    audioStore.lyric = audioStore.listOfSong[0].lyric
}

async function getSongListDetails(id) {
  let params = new URLSearchParams();
  params.append('songListId',id);
  try {
    const res = await selectSongBySongListIdNoPage(params);
    listSongStore.songIds = res.map(item => item.songId);
    listSongStore.SongData = []
    // 在获取到 songIds 后立即调用 getSongDetails
    await getSongDetails();
  } catch (error) {
    console.error('获取歌曲列表失败:', error);
  }
}

async function getSongDetails() {
  if (listSongStore.songIds.length === 0) {
    return;
  }
  const requests = listSongStore.songIds.map(songId => {
    const params = new URLSearchParams();
    params.append('id', songId);
    return selectSongById(params);
  });
  try {
    const results = await Promise.all(requests);
    listSongStore.SongData = results;
  } catch (error) {
    console.error('请求出错:', error);
  }
}
</script>

<style scoped>
.main {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}

::-webkit-scrollbar {
    width: 10px;
    /* 滚动条宽度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background: #e1e5ec;
    /* 轨道颜色 */
    border-radius: 10px;
    /* 圆角 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #4b79a1, #283e51);
    /* 渐变颜色 */
    border-radius: 10px;
    /* 圆角 */
}

/* 滑块在悬停时的效果 */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #3b607e, #1b2e38);
    /* 更深的渐变颜色 */
}

.category-tags {
    padding: 20px;
    display: flex;
    gap: 15px;
}

.tag {
    padding: 5px 15px;
    border-radius: 15px;
    background: #f5f5f5;
    cursor: pointer;
    transition: all 0.3s;
}

.tag.active {
    background: #ff3a3a;
    color: white;
}

.song-list-grid {
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.song-card {
    cursor: pointer;
}

.card-cover {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.card-cover img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform 0.3s;
}
.card-cover:hover .play-button {
    opacity: 1;
}
.song-card:hover .card-cover img {
    transform: scale(1.05);
}

.play-count {
    position: absolute;
    top: 5px;
    right: 5px;
    color: white;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.5);
    padding: 2px 8px;
    border-radius: 10px;
}

.card-title {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.empty-state {
    text-align: center;
    padding: 40px 0;
    color: #999;
    font-size: 16px;
    grid-column: 1 / -1;
}
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s ease;
}

.play-button:hover {
    background: #fff;
    transform: translate(-50%, -50%) scale(1.1);
}

.play-button .el-icon {
    font-size: 24px;
    color: #409EFF;
}
</style>
